var document = this.document;
const types = {
    type: 'BLUE_SPIRIT_XJ_INPUT',
    icon: 'icon-widget-input',
    title: '输入框-蓝灵',
    isInvisibleWidget: false,
    isGlobalWidget: false,
    hasAnyWidget: true,
    properties: [
        {
            key: 'content',
            label: '提示文案',
            valueType: 'string',
            defaultValue: '输入框',
        },
        {
            key: 'value',
            label: '输入文案',
            valueType: 'string',
            defaultValue: '',
        },
        {
            key: 'backgroundColor',
            label: '非焦点提示文案与输入框色',
            valueType: 'color',
            defaultValue: '#9b9b9b',
        },
        {
            key: 'backgroundColorLeft',
            label: '焦点输入框色·左',
            valueType: 'color',
            defaultValue: '#116399',
        },
        {
            key: 'backgroundColorRight',
            label: '焦点输入框色·右',
            valueType: 'color',
            defaultValue: '#38caef',
        },
        {
            key: 'focusTextBackgroundColor',
            label: '焦点提示文案色',
            valueType: 'color',
            defaultValue: '#38caef',
        },
        {
            key: 'textBackgroundColor',
            label: '输入文案色',
            valueType: 'color',
            defaultValue: '#000',
        },
    ],
    methods: [
        {
            key: 'initiativeOnFocus',
            label: '获取焦点',
            params: [],
        },
        {
            key: 'initiativeOnBlur',
            label: '失去焦点',
            params: [],
        },
    ],
    events: [
        {
            key: 'onChange',
            label: '更改',
            params: [],
        },
        {
            key: 'onFocus',
            label: '获取焦点',
            params: [],
        },
        {
            key: 'onBlur',
            label: '失去焦点',
            params: [],
        },
    ],
};
class XJWidget extends VisibleWidget {
    constructor(p) {
        super(p);
        Object.assign(this, p);
        this.a = React.lazy(() => import('https://unpkg.com/react-office-viewer'));
    }
    initiativeOnFocus = () => document.querySelector(`#${this.__widgetId} > div.form__group.field > input`).focus();
    initiativeOnBlur = () => document.querySelector(`#${this.__widgetId} > div.form__group.field > input`).blur();
    onChange = e => {
        this.setProps({ value: e.target.value });
        this.emit('onChange');
    };
    onFocus = e => this.emit('onFocus');
    onBlur = e => this.emit('onBlur');
    render() {
        return (
            <>
                <div className="form__group field">
                    <input
                        type="input"
                        className="form__field"
                        placeholder="Name"
                        required=""
                        onChange={this.onChange.bind(this)}
                        onFocus={this.onFocus.bind(this)}
                        onBlur={this.onBlur.bind(this)}
                        value={this.value}
                    />
                    <this.a.Viewer></this.a.Viewer>
                    <label htmlFor="name" className="form__label">
                        {this.content}
                    </label>
                </div>
                <div
                    dangerouslySetInnerHTML={{
                        __html: `<style>
          .form__group {
          position: relative;
          padding: 20px 0 0;
          width: 100%;
          }
          
          .form__field {
          font-family: inherit;
          width: 100%;
          border: none;
          border-bottom:2px solid ${this.backgroundColor};
          outline:0;
          font-size:17px;
          color:${this.textBackgroundColor};
          padding:7px 0;
          background:transparent;
          transition:border-color 0.2s
          }
          
          .form__field::placeholder {
          color: transparent
          }
          
          .form__field:placeholder-shown~.form__label {
          font-size: 17px;
          cursor: text;
          top: 20px
          }
          
          .form__label {
          position: absolute;
          top: 0;
          display: block;
          transition: 0.2s;
          font-size: 17px;
          color:${this.backgroundColor};
          pointer-events:none
          }
          
          .form__field:focus {
          padding-bottom: 6px;
          font-weight: 700;
          border-width: 3px;
          border-image: linear-gradient(to right, ${this.backgroundColorLeft}, ${this.backgroundColorRight});
          border-image-slice: 1
          }
          
          .form__field:focus~.form__label {
          position: absolute;
          top: 0;
          display: block;
          transition: 0.2s;
          font-size: 17px;
          color: ${this.focusTextBackgroundColor};
          font-weight: 700
          }
          
          .form__field:required,
          .form__field:invalid {
          box-shadow: none
          }
        </style>`,
                    }}
                />
            </>
        );
    }
}
for (let i of types.methods) {
    i.blockOptions = { ...i.blockOptions, callMethodLabel: false };
}
exports.types = types;
exports.widget = XJWidget;
